<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('室温采集数据')" />

</head>
<body class="gray-bg">
<div class="container-div">
    <div class="row">
        <div class="col-sm-12 search-collapse">
            <form id="formId">
                <div class="select-list">
                    <ul>
                        <li>
                            <label>室温采集器：</label>
                            <input type="text" name="tempId" id="tempId"/>
                        </li>
                        <li class="select-time">
                            <label>查询时间： </label>
                            <input type="text" class="time-input" id="startTime" placeholder="开始时间" name="params[beginTime]" th:value="${beginTime}"/>
                            <span>-</span>
                            <input type="text" class="time-input" id="endTime" placeholder="结束时间" name="params[endTime]" th:value="${endTime}"/>
                        </li>
                        <li>
                            <a class="btn btn-primary btn-rounded btn-sm" onclick="getData()"><i class="fa fa-search"></i>&nbsp;搜索</a>
                            <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
                        </li>
                    </ul>
                </div>
            </form>
        </div>
        <div class="col-sm-12 select-table table-striped">
            <div class="col-sm-12" id="temp" style="height:400px;border:1px solid lightgrey;background:#e5e3dc;">
            </div>
        </div>
    </div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: echarts-js" />
<script th:inline="javascript">
    var prefix = ctx + "report/temp";

    var tempId = '';

    function getData(){
        tempId = $("#tempId").val();
        if(tempId==''){
            alert("请选择一个室温采集器");
            return;
        }
        getTemp();
    }

    function getTemp(){
        var lineChart = echarts.init(document.getElementById('temp'));
        var names=[];
        var temps=[];
        var damps=[];
        lineChart.showLoading();//加载动画

        $.ajax({
            url: prefix + '/tempSummary',
            async: true,
            type: "POST",
            dataType: "json",
            data: $("#formId").serializeArray(),
            success: function (json) {
                for (var i = 0; i < json.data.length; i++) {
                    names.push(json.data[i].createTime);
                    temps.push(json.data[i].temp);
                    damps.push(json.data[i].damp);
                }
                lineChart.hideLoading();//隐藏加载动画
                lineChart.setOption({
                    title: {
                        text: '室温曲线图'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: ['温度', '湿度']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        data: names
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        name: '温度',
                        data: temps,
                        stack: '℃',
                        type: 'line',
                        smooth: true
                    },{
                        name: '湿度',
                        data: damps,
                        stack: '%',
                        type: 'line',
                        smooth: true
                    }]
                });
            }
        });
    }
</script>
</body>